<template>
  <view style="position: relative;">
    <view class="hevu-loading" v-if='loadingning' :class="{fixed: fixed}" :style="{zIndex: zIndex,
		position: soltDom ? 'absolute' : 'relative'}">
      <view class="hevu-loading-bag" :style="{opacity: opacity, backgroundColor: backgroundColor}"></view>
      <view class="hevu-loading-body">
        <view>
          <view class="loading">

            <loading v-if='type == "loading1"' :bgColor='loadingIconColor' :bgColor2='loadingIconColor2' :bgColor3='loadingIconColor3' :size="size"/>
          </view>
          <view class="loafdingText" :style="{fontSize: textSize + 'rpx', color: textColor}">
            <view v-if='!textFlicker'>{{loadingText}}</view>
            <view v-else class="textFlicker">
              <text v-for="(text, i) in loadingText" :key='i' class="letter" :style="{animationDelay: 0.48 + (i * 0.12)+'s'}">{{text}}</text>
            </view>
          </view>

        </view>
      </view>
    </view>
    <view class="hevu-loadingSole">
      <slot></slot>
    </view>
  </view>

</template>

<script>
/*
  @property  {Boolean} loadingning      加载状态     true，
  @property  {Boolean} fixed            固定定位     false，
  @property  {Number} zIndex            层级        false，

  @property  {Number} opacity          背景透明度     1
  @property  {String} backgroundColor  背景颜色       #fff

  @property  {String} loadingText      加载文字提示   加载中....
  @property  {String} textColor        加载文字颜色   #3375f6
  @property  {Number} textSize         加载文字大小   30
  @property  {Boolean} textFlicker     加载文字闪动   true

  @property  {String} loadingIconColor 加载图颜色     #3375f6
  @property  {String} type             加载图类型     loading1
  @property  {Number} size             加载图大小     120

*/
import Loading from '@/components/y-loading/loading.vue';

export default {
  name: 'y-loading',
  props: {
    loadingning: {
      type: Boolean,
      default: true,
    },
    fixed: {
      type: Boolean,
      default: false,
    },
    zIndex: {
      type: Number,
      default: 10000,
    },

    loadingText: {
      type: String,
      default: '加载中....'
    },
    textColor: {
      type: String,
      default: '#3375f6'
    },
    textSize: {
      type: Number,
      default: 30
    },
    textFlicker: {
      type: Boolean,
      default: true
    },
    loadingIconColor: {
      type: String,
      default: '#3375f6'
    },
    loadingIconColor2: {
      type: String,
      default: '#3375f6'
    },
    loadingIconColor3: {
      type: String,
      default: '#3375f6'
    },
    type: {
      type: String,
      default: 'loading1'
    },
    opacity: {
      type: Number,
      default: 1,
    },
    backgroundColor: {
      type: String,
      default: '#FFF'
    },
    size: {
      type: Number,
      default: 200,
    }
  },
  data(){
    return {
      soltDom: false,
    }
  },
  components: {
    'loading': Loading
  },
  mounted() {
    this.soltDom = this.$slots?.default?.length;

  }
}
</script>

<style lang="scss" scoped>
.hevu-loading{
  &.fixed{
    position: fixed !important;
    z-index: 10000;
    left: 0;
    top: 0;
  }
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  .hevu-loading-bag{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-color: #fff;
  }
  .hevu-loading-body{
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    .loafding{
      padding: 20rpx;
    }
    .loafdingText{
      font-size: 30rpx;
      line-height: 60rpx;
      text-align: center;
      .textFlicker{
        .letter {
          animation-name: loadingF;
          animation-duration: 1.6s;
          animation-iteration-count: infinite;
          animation-direction: linear;
        }
      }
    }
  }

}
.hevu-loadingSole{

}

@keyframes loadingF {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
</style>
